<template>
  <div>
    <el-card
      class="box-card"
      :body-style="{ padding: '18px 0', boxSizing: 'border-box' }"
    >
      <el-row class="title">
        <el-col :span="6">
          <el-tabs v-model="platform" :stretch="true" @tab-click="handleClick">
            <el-tab-pane label="全部数据" name="all" class="tac"></el-tab-pane>
            <el-tab-pane label="手游" name="h5" class="tac"></el-tab-pane>
            <el-tab-pane label="页游" name="web" class="tac"></el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="17" class="ml40">
          <el-date-picker
            v-model="date_s"
            type="date"
            placeholder="选择日期"
            @input="getTimerData(1, $event)"
            v-loading.fullscreen.lock="fullscreenLoading"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <el-date-picker
            class="ml20"
            v-model="date_e"
            type="date"
            placeholder="选择日期"
            @input="getTimerData(2, $event)"
            v-loading.fullscreen.lock="fullscreenLoading"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="lgSpace" class="mr20 ml20">
          <div class="left fl">
            <h5>新增</h5>
            <p v-if="updateTime">{{ summation.regNumData }}</p>
            <p v-else>
              {{
                dataList.regNumData[dataList.regNumData.length - 1]
                  ? dataList.regNumData[dataList.regNumData.length - 1].value
                  : 0
              }}
            </p>
          </div>
          <div class="right fl">
            <bar :data="dataList.regNumData" :otherData="bar1"></bar>
          </div>
        </el-col>
        <el-col :lg="lgSpace" class="mr20">
          <div class="left fl">
            <h5 v-if="updateTime">活跃(平均)</h5>
            <h5 v-else>活跃</h5>
            <p v-if="updateTime">
              {{ (summation.activeNumData * 1).toFixed(0) }}
            </p>
            <p v-else>
              {{
                dataList.activeNumData[dataList.activeNumData.length - 1]
                  ? dataList.activeNumData[dataList.activeNumData.length - 1]
                      .value
                  : 0
              }}
            </p>
          </div>
          <div class="right fl">
            <bar :data="dataList.activeNumData" :otherData="bar2"></bar>
          </div>
        </el-col>
        <el-col :lg="lgSpace" class="mr20">
          <div class="left fl">
            <h5>流水</h5>
            <p v-if="updateTime">{{ summation.payData }}</p>
            <p v-else>
              {{
                dataList.payData[dataList.payData.length - 1]
                  ? dataList.payData[dataList.payData.length - 1].value
                  : 0
              }}
            </p>
          </div>
          <div class="right fl">
            <bar :data="dataList.payData" :otherData="bar3"></bar>
          </div>
        </el-col>
        <el-col :lg="lgSpace" class="mr20">
          <div class="left fl">
            <h5>收入</h5>
            <p v-if="updateTime">{{ summation.incomeData }}</p>
            <p v-else>
              {{
                dataList.incomeData[dataList.incomeData.length - 1]
                  ? dataList.incomeData[dataList.incomeData.length - 1].value
                  : 0
              }}
            </p>
          </div>
          <div class="right fl">
            <bar :data="dataList.incomeData" :otherData="bar4"></bar>
          </div>
        </el-col>
        <el-col :lg="lgSpace">
          <div class="left fl">
            <h5>市场投入</h5>
            <p v-if="updateTime">{{ summation.totalCostData }}</p>
            <p v-else>
              {{
                dataList.totalCostData[dataList.totalCostData.length - 1]
                  ? dataList.totalCostData[dataList.totalCostData.length - 1]
                      .value
                  : 0
              }}
            </p>
          </div>
          <div class="right fl">
            <bar :data="dataList.totalCostData" :otherData="bar5"></bar>
          </div>
        </el-col>
        <el-col :lg="lgSpace" v-if="checkPower">
          <div class="left fl">
            <h5>毛利</h5>
            <p v-if="updateTime">{{ summation.profitData }}</p>
            <p v-else>
              {{
                dataList.profitData[dataList.profitData.length - 1]
                  ? dataList.profitData[dataList.profitData.length - 1].value
                  : 0
              }}
            </p>
          </div>
          <div class="right fl">
            <bar :data="dataList.profitData" :otherData="bar6"></bar>
          </div>
        </el-col>
        <el-col :lg="lgSpace" v-if="checkPower">
          <div class="left fl">
            <h5>分成</h5>
            <p v-if="updateTime">{{ summation.divideData }}</p>
            <p v-else>
              {{
                dataList.divideData[dataList.divideData.length - 1]
                  ? dataList.divideData[dataList.divideData.length - 1].value
                  : 0
              }}
            </p>
          </div>
          <div class="right fl">
            <bar :data="dataList.divideData" :otherData="bar7"></bar>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import bar from "@/components/Echarts/bar";
export default {
  data() {
    return {
      // 查询
      query: {
        date_s: new Date().toLocaleString().substr(0, 10),
        date_e: new Date().toLocaleString().substr(0, 10),
        platform: "",
      },
      date_s: "",
      date_e: "",
      firstFlag: true,
      platform: "all",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //不可以选择今天之后的日期
        },
      },
      dialogVisible1: false,
      dataList: {
        regNumData: [], // 新增数据
        activeNumData: [], // 活跃数据
        incomeData: [], // 流水数据
        payData: [], // 收入数据
        totalCostData: [], // 市场投入数据
        profitData: [], // 毛利数据
        divideData: [], // 分成数据
      },
      barList: [],
      fullscreenLoading: false, // loading
      getRole: localStorage.getItem("role"),
      bar1: { id: "regnum", toolTips: "新增" },
      bar2: {
        id: "activeNum",
        toolTips: "活跃",
      },
      bar3: { id: "pay", toolTips: "流水" },
      bar4: {
        id: "hincome",
        toolTips: "收入",
      },
      bar5: {
        id: "totalCost",
        toolTips: "市场投入",
      },
      bar6: { id: "divide", toolTips: "毛利" },
      bar7: { id: "gross", toolTips: "分成" },
      updateTime: false, // 是否调整过日期
      summation: [],
    };
  },
  computed: {
    checkPower() {
      let power = ["danny", "wangchao", "lxy", "shengjingyin", "dwn"];
      return power.find((item) => this.getRole == item);
    },
    lgSpace() {
      return this.checkPower ? 3 : 4;
    },
  },
  methods: {
    handleClick(tab, event) {
      this.platform = tab.name ? tab.name : "";
      this.getState();
    },
    // 获取指定多少天之前的时间
    getTimerData(flag, data) {
      let formatData = this.toDate(data);
      if (flag === 1) {
        this.query.date_s = formatData;
      } else {
        this.query.date_e = formatData;
      }
      this.updateTime = true;
      this.getState();
    },
    // 获取数据
    getState() {
      // this.fullscreenLoading = true;
      if (this.platform == "all") {
        this.query.platform = "";
      } else {
        this.query.platform = this.platform;
      }
      /* if (this.firstFlag) {
        this.query.date_s = this.date_s;
        this.query.date_e = this.date_e;
      } */
      this.$api.searchPlatFormData(this.query).then((res) => {
        this.fullscreenLoading = false;
        this.firstFlag = false;
        if (res.code == 101) {
          // extractData 提取数据共同部分
          this.dataList.regNumData = this.extractData(res.data, "reg_num", 2);
          this.dataList.activeNumData = this.extractData(
            res.data,
            "active_num",
            2
          );
          this.dataList.incomeData = this.extractData(res.data, "income");
          this.dataList.payData = this.extractData(res.data, "pay");
          this.dataList.totalCostData = this.extractData(res.data, "totalcost");
          this.dataList.profitData = this.extractData(res.data, "profit");
          this.dataList.divideData = this.extractData(res.data, "divide");
          // 获取求和的数据
          this.getTotalData(this.dataList);
        }
      });
    },
    /* 
      提取数据共同部分
      input： 输入数据
      parmas  输入设置的参数
      fixed   为2 表示 该数据不需要提示格式化为一个小数点，不传参就选哟格式化保留为一个小数点
    */
    extractData(input, parmas, fixed) {
      let fixe = fixed || 1;
      let output = [];
      if (fixe == 2) {
        output = input
          .map((item, index) => {
            return { text: item.report_date, value: item[parmas] };
          })
          .reverse();
      } else {
        output = input
          .map((item, index) => {
            return {
              text: item.report_date,
              value: item[parmas] ? item[parmas].toFixed(1) : 0,
            };
          })
          .reverse();
      }
      /* 
        合并重复日期里面的相同属性 - 适用于后端没有合并数据
      */
      // let res = [] // 记录日期
      // let narr = []
      // for (let i = 0; i < arr.length; i++) {
      //   let n = res.indexOf(arr[i].text)
      //   if (n == -1) {
      //     res.push(arr[i].text)
      //     narr.push({ text: arr[i].text, value: arr[i].value })
      //   } else {
      //     narr[n].value += arr[i].value
      //   }
      // }
      // let output = narr
      return output;
    },
    getTotalData(data) {
      let item = Object.entries(data);
      let length = 0;
      item.forEach((v, index) => {
        this.summation[v[0]] = v[1].reduce((total, n) => {
          return total + Number(n.value).toFixed(0) * 1;
        }, 0);
        if (v[0] == "activeNumData") {
          length = v[1].length;
        }
      });
      console.log("value", length);
      this.summation.activeNumData = this.summation.activeNumData / length;
    },
    // 获取日期
    getYesterday() {
      this.date_e = this.getIndexDay(1);
      this.date_s = this.getIndexDay(1);
      this.query.date_s = this.getIndexDay(7);
      this.query.date_e = this.getIndexDay(1);
    },
  },
  created() {
    this.getYesterday();
    this.getState();
  },
  mounted() {},
  components: {
    bar,
  },
};
</script>
<style lang='stylus' scoped>
.module-title {
  font-size: 16px;
  font-weight: 700;
}

.left {
  width: 72px;
  text-align: center;

  h5 {
    height: 24px;
    line-height: 24px;
  }
}

.title {
  margin-bottom: 20px;
  line-height: 40px;
}

.el-card, .el-message {
  overflow: visible;
}
</style>
